<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试一</title>
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
    <h3>webSocket测试单页面加载及推送</h3>
    <br/>
    <input id="username" type="text">
    <button onclick="send()">发送</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <button onclick="clo()">关闭</button>
    <br/>
    <hr/>
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="message"></div>


</body>
    <script>
        let webSocket=null;
        if ("WebSocket" in window){
            webSocket=new WebSocket("ws://127.0.0.1:8080/websocket");
        }
        else {
            alert("浏览器不支持webSocket！");
        }
        function setMessage(message){
            document.getElementById("message").innerText+=message;
        }
        webSocket.onopen=function () {
            console.log("连接成功");
            setMessage("连接成功")
        };
        //刷新div
        webSocket.onmessage=function (event) {
            setMessage(event.data);

            for (let i = 0; i < event.data.length; i++){
                titleName.push(event.data[i].typename);
                totalnumber.push(event.data[i].totalnumber);
            }
        };
        function send() {
            let user=document.getElementById("username").value;
            //alert(msg);
            webSocket.send(user);
        }
        //关闭按钮调用函数
        function clo() {
            webSocket.close(3000,"强制关闭");
        }
        webSocket.onclose=function () {
            setMessage("close websocket");
        };
        window.onbeforeunload=function () {
            clo();
        };

        let titleName = [];
        let totalnumber = [];



        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '类别数量'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: titleName
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: totalnumber
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</html>